<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-container>
                    <el-aside class="bg-slate-600 min-h-screen" :width="isCollapse ? '68px':'230px'">
                        <h1 style="color:#ffffff;text-align:center;font-size:20px;font-weight:700;line-height:40px;" v-if="!isCollapse">后台管理</h1>
                        <el-icon color="#ffffff" size="25"  style="margin:5px 20px;" v-else><ElemeFilled /></el-icon>
                        <el-menu
                            :router="true"
                            default-active="2"
                            class="el-menu-vertical-demo"
                            active-text-color="#59ef7e"
                            text-color="#fff"
                            background-color="#475569"
                            :collapse="isCollapse"
                            :collapse-transition="false"
                            unique-opened
                            :default-active="$route.path"
                            :default-openeds="['1']"
                        >
                            <el-sub-menu index="1">
                                <template #title>
                                    <el-icon><HomeFilled /></el-icon>
                                    <span>首页</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="/home">工作台</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="2">
                                <template #title>
                                    <el-icon><UserFilled /></el-icon>
                                    <span>角色管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="/role">角色列表</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="3">
                                <template #title>
                                    <el-icon><Setting /></el-icon>
                                    <span>权限管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="/powers">权限列表</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="4">
                                <template #title>
                                    <el-icon><Avatar /></el-icon>
                                    <span>用户管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="/user">用户列表</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                        </el-menu>
                    </el-aside>
                    <el-container>
                        <el-header class="bg-neutral-100" style="line-height:60px;">
                            <div class="header">
                                <div class="left" @click="toggleCollapse">
                                    <el-icon v-if="!isCollapse" size="20"><Fold/></el-icon>
                                    <el-icon v-else size="20"><Expand /></el-icon>
                                </div>
                                <div class="right">
                                    <el-dropdown @command="commandClick">
                                        <span class="el-dropdown-link">
                                            <el-icon size="20"><Setting/></el-icon>
                                        </span>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item command="1">个人中心</el-dropdown-item>
                                                <el-dropdown-item command="2">退出登录</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </div>
                        </el-header>
                        <div class="tag">
                            <el-scrollbar ref="scrollPane">
                                <div class="left">
                                    <el-tabs  ref="tag" v-model="activeTab" @tab-remove="handleCloseTag" @tab-click="handleClick"  type="card" >
                                        <el-tab-pane
                                            :key="tag"
                                            v-for="tag in tagsList"
                                            :label="tag.title"
                                            :name="tag.name"
                                            :closable="tag.editable"
                                        >
                                        </el-tab-pane>
                                    </el-tabs>
                                </div>
                            </el-scrollbar>
                        </div>
                        <el-main>
                            <router-view></router-view>
                        </el-main>
                    </el-container>
                </el-container>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'Vue3ViteIndex',

    data() {
        return {
            activeTab:"1",
            isCollapse:false,
            tagsList:[
                {
                    title:"工作台", //标签名
                    path:"/home", //路由
                    name:"home",
                    editable:false
                }
            ],
        };
    },
    watch:{
        $route(to,form){
            this.setTags(to);
            var loginType=sessionStorage.getItem("loginType")
            if(!loginType){
                this.$router.push("/login")
            }
        }
    },
    mounted() {
        this.setTags(this.$route);
    },

    methods: {
         //关闭标签
       handleCloseTag(tag) {
         this.tagsList.splice(this.tagsList.indexOf(tag), 1);
         // array.splice(index,howmany) 从索引为index处删除howmany个元素
         if (this.tagsList.length > 0) {
           this.$router.push(this.tagsList[this.tagsList.length - 1].path);
         } else {
           this.$router.push("/home");
         }
       },
        //是否选中
        handleClick(tag,event) {
            console.log(tag.props.name)
            this.$router.push(`/${tag.props.name}`)
        },
        setTags(route){
            const isExsit = this.tagsList.some(item => {
                return item.path === route.fullPath;
            });
            if (isExsit == false) {
                this.tagsList.push({
                    title: route.meta.title, //标签名
                    path: route.fullPath, //路由
                    name:route.name,
                    editable: route.meta.editable
                });
            }
        },
        commandClick(e){
            if(e==2){
                sessionStorage.removeItem("loginType")
                this.$router.push("/login")
            }else{
                this.$router.push("/mine")
            }
        },
        toggleCollapse(){
            this.isCollapse=!this.isCollapse
        },
    },
};
</script>
<style lang="less" scoped>
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  .right{
    .el-dropdown-link{
        margin-top:15px;
    }
  }
}
</style>